<template>
  <div class="">
    <el-row>
      <el-col :span="24">
        <div class="page-filter mb10 fl">
          <el-form ref="filter" :model="filter" label-width="0">
            <el-form-item class="mr10 mb5 fl">
              <ProSelect v-model="filter.id" />
            </el-form-item>
            <el-form-item class="mr10 mb5 fl">
              <el-select
                v-model="filter.ratio"
                size="small"
                remote
                filterable
                style="width: 100%"
                placeholder="预算状态"
                clearable
              >
                <el-option
                  v-for="item in ratios"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="mr10 mb5 fl" style="width: 300px">
              <el-button size="small" @click="app.resetFields($refs['filter'].$parent,'filter')">清 空</el-button>
              <el-button type="primary" size="small" @click="getList">查 询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="24">
        <el-row>
          <el-col :span="24" class="h240 pr">
            <div class="m-center w100 h240">
              <div id="ba" style="width: 100%; height:240px;" />
            </div>
            <div class="m-right pa r0 t0 h220">
              差异率: {{ filter.pageAll ? app.toFix((ratio.ratio*100)/filter.pageAll, 2) + '%' : '0.00%' }}
            </div>
          </el-col>
        </el-row>
        <el-table
          v-loading="app.loading"
          class="search-table"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%;"
        >
          <el-table-column label="序号" align="center" width="56px">
            <template slot-scope="{$index}">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="项目名称" min-width="220px" prop="name" />
          <el-table-column label="PO单号" width="190px">
            <template slot-scope="{row}">
              {{ 'PO'+row.id }}
            </template>
          </el-table-column>
          <el-table-column label="预算金额 " align="right" width="140px">
            <template slot-scope="{row}">
              {{ app.toFix(row.quoted_price, 2) }}
            </template>
          </el-table-column>
          <el-table-column label="实际金额 " align="right" width="140px">
            <template slot-scope="{row}">
              {{ app.toFix(row.cost, 2) }}
            </template>
          </el-table-column>
          <el-table-column label="差值金额 " align="right" width="140px">
            <template slot-scope="{row}">
              {{ app.toFix(row.diff, 2) }}
            </template>
          </el-table-column>
          <el-table-column label="预算状态 " align="right" width="140px">
            <template slot-scope="{row}">
              {{ app.toFix(row.diff, 2) >= 0 ? '节约' : '超预算' }}
            </template>
          </el-table-column>
          <el-table-column label="差异率 " align="right" width="140px">
            <template slot-scope="{row}">
              {{ app.toFix(row.ratio*100, 2) + '%' }}
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="filter.pageAll>0" :total="filter.pageAll" :page.sync="filter.pageCurrent" :limit.sync="filter.pageNumber" @pagination="getList" />
      </el-col>
    </el-row>
    <Paytypes ref="paytypes" :get-data="getList" :info="dialog" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { bcwp, bcwpRatio } from '@/api/statistics/statistics'
import page from '@/utils/page'
import ProSelect from '@/components/ProSelect'
import Paytypes from '@/views/business/components/order/components/paytypes-dialog'

export default {
  name: '',
  components: { ProSelect, Paytypes },
  extends: page,
  props: {
    reqList: {
      default: bcwp,
      type: Function
    }
  },
  data() {
    return {
      ratio: {},
      ratios: [{key: 'jy', value: '节约'}, {key: 'cys', value: '超预算'}]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getListAfter() {
      this.handleAmount()
    },
    handleAmount() {
      bcwpRatio({
        ...this.filter
      }).then(res => {
        this.ratio = res.info || {}
        this.handleSAmount()
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    handleSAmount() {
      var chart = document.getElementById('ba')
      var echart = echarts.init(chart)
      let x = ['预算金额', '实际金额']
      let y = [this.ratio.quoted_price || 0, this.ratio.cost]
      let option = {
        title: {
          text: '预算成本分析表',
          subtext: ''
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: x
        },
        yAxis: {},
        series: [
          {
            name: '金额',
            type: 'bar',
            data: y,
            itemStyle: {
              barBorderRadius: 0,
              color: '#73c0de',
              borderWidth: 0,
              borderType: 'solid',
              borderColor: '#73c0de',
              shadowColor: '#73c0de',
              shadowBlur: 0
            },
            barWidth: '40%'
          },
        ]
      }
      echart.setOption(option)
    }
  }
}
</script>
<style scoped>
.m-left-title{
  padding: 10px;
  height: 70px;
  line-height: 1.2;
  border-radius: 6px;
  color: #FFFFFF;
}
.m-center{
  padding-left: 10px;
  padding-right: 320px;
}
.m-right {
  width: 310px;
}
</style>
